<script lang="ts" setup>
import {
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { getkpzlList, getExpertWorkInfo, getShenTai } from '~/api/home'

const list = ref<any[]>([])
const mockData = [
  "西安故事",
  "西安要情",
  "生态西安"
]
const keyType = ref('海报')
const name = ref('科普资料/')
const eyes = ref('/img/eys.png')
function keyTypeClisk(item) {
  keyType.value = item
  queryParams.condition[0].value = name.value + keyType.value
  getData()
}
const queryParams = reactive(
  {
    page: {
      rownumber: 8,
      pageNo: 1,
    },
    // classify_name:'科普资料/资料/折页',
    condition: [{
      colName: 'classify_name',
      value: name.value + keyType.value,
      ruleType: 'like]',
    }],
    positions: '首页',
  },
)
function getData() {
  if (keyType.value == "西安故事" || keyType.value == "西安要情") {
    getkpzlList(queryParams).then((res) => {
      list.value = res.data.map((item) => {
        // compressImage(item.cover_file_name).then((res) => {
        //   imgMap[item.cover_file_name] = res
        // })
        return item
      })
    }).catch(() => {
    })
  }
  if (keyType.value == "生态西安") {
    console.log("生态西安");

    getShenTai().then((res) => {
      list.value = res.data.map((item) => {
        // compressImage(item.cover_file_name).then((res) => {
        //   imgMap[item.cover_file_name] = res
        // })
        return item
      })
    }).catch(() => {
    })

  }
}
const finalList = computed(() => {
  return list.value
})
onMounted(() => {
  keyType.value = "西安故事"
  queryParams.condition[0].value = name.value + keyType.value
  getData()
})
function loadMore() {
  navigateTo({
    path: `/peopleHealth/popularization`,
    query: {
    },
  })
}
function getDetailUrl(item: any) {
  let url = `/peopleHealth/popularizationDetail/${item.id}`
  if (item.classify && item.classify.split('/').length > 1) {
    const classify = item.classify.split('/')
    url += `&${classify[classify.length - 1]?.trim()}`
  }
  return url
}
</script>

<template>
  <div
    class="min-h-210 bg-#ffffff  max-w-1200px mx-auto  border-2 border-solid border-#AC8358 rounded-10px m-b-10">
    <div class="flex items-end justify-center pt-30px">
      <span class="mr-10px inline-block h-8px w-8px bg-#AC8358 -mt-15px" />
      <span class="px-2 font-bold" text="#1D2128 22px">西安地情</span>
      <span class="ml-10px inline-block h-8px w-8px bg-#AC8358 -mt-15px" />
    </div>
    <div class="flex justify-center font-black font-serif -mt-10px" text="#031D2822 26px">
      Xi`an DiQing
    </div>
    <div class=" py-6">
      <div class="flex justify-around bg-#ffffffcc ">
        <div class="w-15%">
          <div v-for="item in mockData" :key="item" text="#1D2128 16px"
            class="w-100% flex flex-wrap justify-center py-5px">
            <div class="w-100px cursor-pointer pt-2 text-center font-bold font-sans" border="b-5px solid transparent"
              hover=" b-b-#AC8358" :class="{ ' b-b-#AC8358': keyType === item }" @click="keyTypeClisk(item)">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="w-75%">
          <div grid="~ cols-[repeat(auto-fill,_minmax(160px,_1fr))] gap-30px">
            <NuxtLink v-for="item in finalList" :key="item.id" class="cursor-pointer overflow-hidden transition-all"
              hover=" shadow text-#AC8358" :to="{ path: getDetailUrl(item) }">
              <div v-if="item.cover_file_name" class="h-240px w-full overflow-hidden">
                <el-image class="h-full w-full transition-all hover:scale-115" fit="cover" lazy loading="lazy"
                  :src="getImgUrl(item.cover_file_name)">
                  <template #placeholder>
                    <div class="image-slot">
                      <i class="i-ri:loader-fill loader" />
                    </div>
                  </template>
                </el-image>
              </div>

              <div v-else class="h-240px w-100% bg-#f5f7fd" />
              <div class="bg-#fff p-10px">
                <div class="truncate">
                  {{ item.title_name }}
                </div>
                <div class="flex justify-between">
                  <span text="#AEAEB2 12px">
                    {{ item.release_time ? item.release_time.split(' ')[0] : item.modify_time.split(' ')[0] }}
                  </span>
                  <div class="flex">
                    <img class="h-18px w-15px" :src="eyes" alt="">
                    <span text="#AEAEB2 12px">{{ item.page_view_num }}</span>
                  </div>
                </div>
              </div>
            </NuxtLink>
          </div>

          <div v-if="finalList && finalList.length" class="flex justify-between py-6">
            <div>
              <el-button color="#AC8358" plain @click="loadMore">
                查看更多
              </el-button>
            </div>
            <!-- <div>
              <el-button color="#AC8358" :icon="ArrowLeft" plain />
              <el-button color="#AC8358" :icon="ArrowRight" style="color:#fff" />
            </div> -->
          </div>
          <div v-else class="h-full w-full flex items-center justify-center">
            <el-empty class="ml--100px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.image-slot {
  width: 100%;
  height: 240px;
  background-color: #f5f7fd;
  // background-image: url('/img/placeholder.jpg');
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  // 实现一个无限循环转圈的loading动画
  .loader {
    display: inline-block;
    animation: loader 3s infinite linear;
    color: #fff;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.6);
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
